<template>
    <div>
        <!-- 父子组件传值  -->
        <Title :title="title"></Title>
        <!-- 1.提供图表容器 -->
        <div ref="left2" style="height: 200px;"></div>
    </div>
</template>

<script>
// 2.引入饼图构造函数 
import { Pie, measureTextWidth } from '@antv/g2plot';
// 路径中@表示src
import { get } from '@/utils/request'

function renderStatistic(containerWidth, text, style) {
    const textWidth = measureTextWidth(text, style);
    const textHeight = style.lineHeight || style.fontSize;
    const R = containerWidth / 2;
    // r^2 = (w / 2)^2 + (h - offsetY)^2
    let scale = 1;
    if (containerWidth < textWidth) {
        scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1);
    }
    const textStyleStr = `width:${containerWidth}px;`;
    return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'};">${text}</div>`;
}

export default {
    data() {
        return {
            title: '设备状态分布',
            // 存放设备数据 
            empData: []
        }
    },
    methods: {
        // 加载图表函数
        loadPie() {
            const piePlot = new Pie(this.$refs.left2, {
                appendPadding: 10,
                data: this.empData,
                angleField: 'value',
                // 按照类型分组颜色
                colorField: 'type',
                color: ({ type }) => {
                    if (type == '在线') {
                        return '#a2a6ec'
                    }
                    return 'pink'
                },
                radius: 1,
                innerRadius: 0.64, // 设置内半径，形成环图
                meta: {
                    value: {
                        formatter: (v) => `${v} 台`, // 假设单位是台
                    },
                },
                label: {
                    type: 'inner',
                    offset: '-50%',
                    style: {
                        textAlign: 'center',
                    },
                    autoRotate: false,
                    content: '{value}',
                },
                statistic: {
                    title: {
                        offsetY: -4,
                        customHtml: (container, view, datum) => {
                            const { width, height } = container.getBoundingClientRect();
                            const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
                            const text = datum ? datum.type : '总计';
                            return renderStatistic(d, text, { fontSize: 28 });
                        },
                    },
                    content: {
                        offsetY: 4,
                        style: {
                            fontSize: '32px',
                        },
                        customHtml: (container, view, datum, data) => {
                            const { width } = container.getBoundingClientRect();
                            const text = datum ? `${datum.value} 台` : `${data.reduce((r, d) => r + d.value, 0)} 台`;
                            return renderStatistic(width, text, { fontSize: 32 });
                        },
                    },
                },
                // 图例属性 
                legend: {
                    // 给分类图例设置样式 
                    itemName: {
                        style: {
                            fill: 'black'
                        }
                    }
                },
                // 添加 中心统计文本 交互
                interactions: [{ type: 'element-selected' }, { type: 'element-active' }, { type: 'pie-statistic-active' }],
            });

            piePlot.render();
        },
        // 获取设备数据 统计在线离线状态 async await 异步编程解决方案 
        async getEmpData() {
            let res = await get('/dashboard/queryDeviceOnlineNumber');
            console.log(res, '获取响应');
            this.empData = res.data;
        }
    },
    async mounted() {
        // 确保先获取数据 再将数据设置给图表
        await this.getEmpData();
        this.loadPie()
    }
}
</script>

<!-- css代码 -->
<style lang="less" scoped></style>